<template>
    <div class="loginNav">
        <div class="login">
            <div class="log">
            <span class="iconfont icon-yinle"></span>
            </div>    
            <h1>欢迎登录</h1>
            <div class="form">
            <div class="item">
                <span class="iconfont icon-zhanghao"></span>
                <input type="text" placeholder="手机号码" v-model="phone">
            </div>
            <div class="item">
                <span class="iconfont icon-yanzhengma"></span>
                <input type="text" placeholder="验证码" v-model="captcha">
                <button class="getCode" @click="getCode">发送</button>
                <!-- <button class="getCode" >发送</button> -->
            </div>
            <div class="item">
                <div class="submit" @click="submit">提交</div>
                <!-- <div class="submit" @click="getCellphoneFun">提交</div> -->
            </div>
            </div>
            <div class="zbdl">
                <span @click="submitNologin">暂不登录</span>
                <!-- <span >暂不登录</span> -->
            </div>
        </div>
    </div>
</template>

<script>
    import{getCaptcha,getCaptchaVerify}from "../../api/base";
    // import{getCaptcha}from "../../api/base";
    // import{getCellphone}from "../../api/base";
    import{Notify}from'vant';
    export default {
        data() {
            return {
                phone:"",
                captcha:""
            }
        },
        methods: {
            // getCellphoneFun(){
            //     getCellphone({phone:"this.phone",password:"this.captcha"}).then(data=>{
            //         console.log(data);
            //     })
            // }
            getCode(){
                let reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
                if(!reg.test(this.phone)){
                    Notify({ type: 'warning', message: '请输入正确手机号码' });
                    return;
                }
                getCaptcha({"phone":this.phone}).then((data)=>{
                    console.log(data);
                    if(data.code == 200){
                        Notify({ type: 'success', message: '验证码发送成功' });
                    }
                })
            }   ,
            submit(){
                let reg = /^[0-9]{4}$/;
                
                if(!reg.test(this.captcha)){
                    Notify({ type: 'warning', message: '请输入正确验证码' });
                    return;                    
                }
                getCaptchaVerify({"phone":this.phone,"captcha":this.captcha}).then(data=>{
                    if (data.code == 200) {
                        // Notify({ type: 'success', message: '登陆成功' }); 
                        this.$store.commit("setLogin")
                        window.localStorage.setItem("login","true")
                        this.$router.push("/recommend")  
                    }else{
                        Notify({ type: 'warning', message: '登陆失败' });
                    }
                    
                })
            },
            submitNologin(){
                this.$store.commit("setLogin")
                window.localStorage.setItem("login","true")
                 this.$router.push("/recommend")  
            }

        },
    }
</script>

<style lang="less" scoped>
    .loginNav{
        height: 100%;
        width: 640px;
    }
    .login{
        background-image: linear-gradient(to left,skyblue,#45DBC6,#B3C283);
        width: 100%;
        height: 100%;
        color: #fff;
        .log{
            text-align: center;
            height: 200px;
            line-height: 200px;
            span{
                margin: 0 auto;
                font-size: 90px;
                color: #FFF;
            }
        }
        h1{
            font-size: 48px;
            text-align: center;
            height: 48px;
            padding: 100px 0  85px 0;
        }
        .form{
            .item{
                width: 76%;
                height: 60px;
                line-height: 60px;
                margin: 0 auto;
                background-color: #8EC7C1;
                border-radius: 30px;
                margin-bottom: 24px;
                input{
                    border: none;
                    outline: none;
                    text-indent: .5em;
                    background-color: transparent;
                    color: #fff;
                    font-size: 25px;
                    &::-webkit-input-placeholder{color: #fff;}
                }
                span{
                    font-size: 40px;
                    margin-left: 10px;
                    display: inline-block;
                    vertical-align: middle;
                }
                .icon-zhanghao{
                    color: aquamarine;
                }
                .getCode{
                    border: 1px solid #fff;
                    height: 40px;
                    width: 100px;
                    line-height: 40px;
                    text-align: center;
                    border-radius: 20px;
                    color: #d4473c;
                    background-color: #fff;
                }
                .submit{
                    // border: none;
                    font-size: 30px;
                    background-color: #fff;
                    text-align: center;
                    border-radius: 30px;
                    color: #d4473c;
                }
            }
        }
        .zbdl{
            text-align: center;
            margin: 50px 0 0 0;
            span{
                text-decoration: underline;
            }
        }
    }

</style>